<template>
  <div id="app">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      router
    >
      <el-menu-item index="/index">
        首页
      </el-menu-item>
      <el-menu-item index="/study">
        课程学习
      </el-menu-item>
      <el-menu-item index="/student">
        学员展示
      </el-menu-item>
      <el-menu-item index="/about/about">
        关于
      </el-menu-item>
      <el-menu-item index="/community">
        社区
      </el-menu-item>
    </el-menu>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <el-backtop :visibility-height="height"></el-backtop>
    <!-- 首页使用了float布局，与全局footer有冲突 -->
    <Footer v-if="this.$route.matched[0].path != '/index'"/>
  </div>
</template>

<script>
import Footer from './components/Footer.vue';

export default {
  components: { Footer },
  name: 'App',
  data() {
    return {
      activeIndex:'/', // 当前选中的下标
      height: 1
    };
  },
  watch: {
    // 监听路由，发生改变则触发事件修改掉avtiveIndex
    $route() {
      this.handleSelect(this.activeIndex)
    }
  },
  mounted() {
    // 挂载时，讲当前选中的下标改为对应路由
    this.activeIndex = this.$route.matched[0].path || '/'
  },
  methods: {
    // 触发选中时，修改下标
    handleSelect(data) {
      this.activeIndex = data
    }
  }
}
</script>


<style scoped>
.el-menu-demo {
  display: flex;
  justify-content: flex-end;
  /* margin-bottom: 60px; */
}
</style>>

